<template>
	<view class="container">
		<uni-section class="mb-10" title="频次提醒">
			<!-- <template v-slot:right> -->
			<!-- <button class="add-btn" @click="addReport" type="primary" size="mini">新增进库记录</button> -->
			<!-- </template> -->
			<view class="mb-10" style="text-align: center;color: red;">
				<text>共有{{ total }}家商户已超期</text>
			</view>
		</uni-section>

		<!-- 搜索筛选区域 -->
		<view class="search-container">
			<view class="search-row">
				<view class="search-item  user-search">
					<text class="search-label">商户:</text>
					<uni-easyinput v-model="searchData.name" placeholder="请输入商户" />
				</view>
			</view>
			<view class="search-row">
				<view class="search-item  user-search">
					<text class="search-label">区域:</text>
					<uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" popup-title="请选择省市区"
						@change="onchange" @nodeclick="onnodeclick">
						<view class="selectedAddress">
							<!-- <view v-if="data.length == 0 && curLocation">{{ curLocation }}</view>
							<view v-if="data.length" class="selected">
								<view v-for="(item,index) in data" :key="index" class="selected-item">
									<text>{{item.text}} </text>
								</view>
							</view> -->
							<view class="addrlocation">
								<uni-icons type="location" color="#ec4149" size="24"></uni-icons>
							</view>
						</view>
					</uni-data-picker>
					<uni-easyinput v-model="searchData.districtName" placeholder="请输入区域" />
				</view>
			</view>
			<view class="search-row">
				<view class="search-item  user-search">
					<text class="search-label">人员:</text>
					<uni-easyinput v-model="searchData.oilCollector" placeholder="请输入人员" />
				</view>
			</view>
			<view class="search-row">
				<!-- <view class="search-item  user-search">
					<text class="search-label">商户油脂类型:</text>
					<ld-select :multiple="true" :list="options2" label-key="label" value-key="value" placeholder="请选择"
						clearable v-model="reportTypeList" @change="selectChange2"></ld-select>
				</view> -->
				<view class="search-item  user-search">
					<text class="search-label">油脂类型:</text>
					<ld-select :list="options2" label-key="label" value-key="value" placeholder="请选择" clearable
						v-model="searchData.type"></ld-select>
					<!-- <uni-data-select v-model="searchData.type" :localdata="options2" /> -->
				</view>
			</view>
			<view class="search-row">
				<!-- <view class="search-item  user-search">
					<text class="search-label">商户油脂类型:</text>
					<ld-select :multiple="true" :list="options2" label-key="label" value-key="value" placeholder="请选择"
						clearable v-model="reportTypeList" @change="selectChange2"></ld-select>
				</view> -->
				<view class="search-item  user-search">
					<text class="search-label">商户级别:</text>
					<ld-select :list="options3" label-key="label" value-key="value" placeholder="请选择" clearable
						v-model="searchData.level"></ld-select>
					<!-- <uni-data-select v-model="searchData.type" :localdata="options2" /> -->
				</view>
			</view>

			<view class="search-btn-group">
				<button class="search-btn" @click="handleSearch">搜索</button>
				<button class="reset-btn" @click="handleReset">重置</button>
			</view>
		</view>
		<!-- 分页组件 -->
		<uni-pagination class="pagination" :current="pageNum" :total="total" :pageSize="pageSize"
			@change="handlePageChange" />

		<scroll-view class="scroll-container" scroll-y style="height: calc(100vh - 160rpx)">
			<view v-for="item in datas" :key="item.id" class="item-item">
				<view class="item-header">
					<text class="merchant-id">商户名称: {{ item.name }}</text>
					<view class="action-btns">
						<button class="edit-btn" @click="scanQRcodes(item.id)">收油记录</button>
						<!-- <button class="delete-btn" @click="delReport(item.id)">删除</button> -->
					</view>
				</view>
				<view class="item-content">
					<!--          <view class="field-row">-->
					<!--            <text class="label">操作人:</text>-->
					<!--            <text class="value">{{ item.userName }}</text>-->
					<!--          </view>-->
					<view class="field-row">
						<text class="label">超期天数:</text>
						<text class="value">{{ item.overTime }}</text>
					</view>
					<view class="field-row">
						<text class="label">所属城区:</text>
						<text class="value">{{ item.districtName }}</text>
					</view>
					<view class="field-row">
						<text class="label">详细地址:</text>
						<text class="value">{{ item.address }}</text>
					</view>
					<view class="field-row">
						<text class="label">联系人姓名:</text>
						<text class="value">{{ item.contactPerson }}</text>
					</view>
					<view class="field-row">
						<text class="label">联系电话:</text>
						<text class="value">{{ item.phone }}</text>
					</view>
					<view class="field-row">
						<text class="label">负责收油员姓名:</text>
						<text class="value">{{ item.oilCollector }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listMerchant
	} from '@/api/system/merchant.js';
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		selectDictLabel //主要是这个
	} from '@/utils/ruoyi'
	const cityRows = require('@/pages/common/opendb-master/collection/opendb-city-china/data.json')
	export default {
		// name: '频次提醒',
		data() {
			return {
				options: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				datas: [],
				options2: [],
				options3: [],
				searchData: {
					name: '', // 商户名称
					type: '',
					level: '',
					districtName: '',
					collectionDateStart: new Date().toISOString().slice(0, 10) + " 00:00:00", // 开始日期
					collectionDateEnd: new Date().toISOString().slice(0, 10) + " 23:59:59" // 结束日期
				},
				localData: [], //省市区地址
				// curLocation: uni.getStorageSync('location_address'),
				curLocation: ''
			};
		},
		onLoad(options) {
			// 加载数据
			// this.fetchData();
			// 数据字典
			getDicts("fqyz_type").then(response => {
				this.options2 = response.data.map(item => ({
					value: item.dictValue,
					label: item.dictLabel
				}))
			});
			// 数据字典
			getDicts("fqyz_level").then(response => {
				this.options3 = response.data.map(item => ({
					value: item.dictValue,
					label: item.dictLabel
				}))
			})

		},
		onShow(options) {
			this.fetchData();
			this.localData = this.get_city_tree()
		},
		methods: {
			selectDictLabel,
			// 加载数据
			async fetchData() {
				try {
					var fzr = this.$store.state.user.userId;
					if (fzr == 1) {
						fzr = '';
					}
					// 数据字典
					await getDicts("sys_car_number").then(response => {
						this.options = response.data.map(item => ({
							value: item.dictValue,
							text: item.dictLabel
						}))
					})
					const res = await listMerchant({
						'pageNum': this.pageNum,
						'pageSize': this.pageSize,
						'frequencyPrompt': 'N',
						'sort': 'desc',
						'fzr': fzr,
						...this.searchData
					});
					this.datas = res.rows;
					this.total = res.total;
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			// 翻页
			handlePageChange(e) {
				this.pageNum = e.current;
				this.fetchData();
			},
			// 跳转收油，同扫码
			scanQRcodes(id) {
				uni.navigateTo({
					url: `../record/merchant2record?merchantId=${id}`
				});
			},
			// 搜索
			handleSearch() {
				console.log(this.searchData)
				// this.searchData.collectionDateStart = this.collectionDate[0]
				// this.searchData.collectionDateEnd = this.collectionDate[1]
				// 重置页码
				this.pageNum = 1;
				this.fetchData();
			},
			// 重置搜索条件
			handleReset() {
				this.searchData = {
					name: '', // 商户名称
					type: '',
					level: '',
					// collectionDateStart: new Date().toISOString().slice(0, 10) + " 00:00:00",
					// collectionDateEnd: new Date().toISOString().slice(0, 10) + " 23:59:59"
				};
				// 重置页码并重新加载数据
				this.pageNum = 1;
				this.fetchData();
			},
			// 省市区数据树生成
			get_city_tree() {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				return res
			},


			handleTree(data, parent_code = null) {
				let res = []
				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',
					text: 'name',
					value: 'code'
				}
				let oneItemDEMO = {
					text: '',
					value: '',
					children: [],
				}
				let oneItem = {}

				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty(keys.pid) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
						}
					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty(keys.pid) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
						}
					}
				}
				return res
			},
			onchange(e) {},
			onnodeclick(node) {
				this.searchData.districtName = node.text
			}
		}
	}
</script>



<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.toolbar {
		/* margin-bottom: 20rpx; */
	}

	.add-btn {}

	.pagination {
		margin: 20rpx 0;
	}

	.scroll-container {
		border-radius: 12rpx;
		background-color: white;
		overflow: hidden;
	}

	.item-item {
		margin: 10rpx 0;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #e5e5e5;
		padding-bottom: 10rpx;
	}

	.merchant-id {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		width: 80%;
	}

	.action-btns {
		display: flex;
		gap: 10rpx;
	}

	.edit-btn {
		background-color: #55B3FF;
		color: white;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.delete-btn {
		background-color: #FF6666;
		color: white;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.field-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.label {
		width: 300rpx;
		color: #666;
		font-weight: bold;
	}

	.value {
		flex: 1;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 响应式布局 */
	@media (min-width: 750rpx) {
		.scroll-container {
			width: 70%;
			margin: 0 auto;
		}
	}

	.search-container {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.search-row {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.search-item {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.search-label {
		display: inline-block;
		width: 200rpx;
		margin-right: 10rpx;
		color: #666;
	}

	.search-btn-group {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}

	.search-btn,
	.reset-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.search-btn {
		background-color: #1989fa;
	}

	.reset-btn {
		background-color: #999;
	}

	.user-search {
		flex: 1;
	}

	/* 省市区选择器容器样式 */
	.search-item {
		position: relative;
		/* 用于定位图标 */
		width: 100%;
		padding: 10rpx 0;
	}

	/* 选中地址的容器样式 */
	.selectedAddress {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 72rpx;
		/* 与输入框高度保持一致 */
		padding: 0 10rpx;
		border: 1rpx solid #e5e5e5;
		/* 边框与输入框统一 */
		border-radius: 8rpx;
		/* 圆角风格统一 */
		background-color: #fff;
		box-sizing: border-box;
	}

	/* 未选择地址时，显示当前定位文本 */


	/* 已选择地址的容器 */
	.selected {
		display: flex;
		align-items: center;
		flex: 1;
		/* 占满剩余空间，给图标留位置 */
		flex-wrap: nowrap;
		/* 不换行 */
		overflow: hidden;
	}

	/* 选中的省/市/区文本样式 */
	.selected-item {
		font-size: 28rpx;
		color: #333;
		/* 已选择时深色 */
		padding: 0 5rpx;
		line-height: 1;
	}

	/* 地址图标容器 */
	.addrlocation {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		/* 固定宽度，避免挤压文本 */
		height: 100%;
		margin-left: 10rpx;
	}

	/* 选择器弹出层的选项样式（穿透scoped限制，需用/deep/） */
	/deep/ .uni-data-picker__popup {
		border-radius: 16rpx 16rpx 0 0;
		/* 顶部圆角 */
	}

	/deep/ .uni-data-picker__content {
		height: 500rpx;
		/* 弹窗高度 */
	}

	/deep/ .uni-data-picker__tree-item {
		height: 80rpx;
		/* 选项高度 */
		line-height: 80rpx;
		font-size: 28rpx;
	}

	/deep/ .uni-data-picker__tree-item--active {
		background-color: #f0f7ff;
		/* 选中项背景色 */
		color: #1989fa;
		/* 选中项文本色，与搜索按钮呼应 */
	}

	/* 解决与其他输入框的间距问题 */
	.search-row:not(:last-child) {
		margin-bottom: 20rpx;
		/* 行与行之间的间距 */
	}
</style>